<template>
  <div class="supply-wrapper">
    <el-dialog
      :visible.sync="chooseVisible"
      title="选择执行单位"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <el-alert
        title="执行数量之和应等于所需数量，否则无法提交成功！"
        type="warning"
        style="margin: 10px 0 12px"
      >
      </el-alert>
      <el-tabs v-model="activeName">
        <el-tab-pane label="内部生产" name="inner" disabled></el-tab-pane>
        <el-tab-pane label="供应商生产" name="supply">
          <el-card shadow="never" class="aui-card--fill managementWrapper">
            <div class="mod-sys__user">
              <div
                class="disCenterBetween top-wrapper"
                style="margin-bottom: 24px"
              >
                <div class="overHidden" style="max-width: 15vw">
                  <span style="color: #666">产品名称：</span>
                  <el-tooltip
                    class="item"
                    effect="light"
                    :content="chooseBomObj.product_name"
                    placement="top"
                  >
                    <span>{{ chooseBomObj.product_name }}</span>
                  </el-tooltip>
                </div>
                <div
                  class="overHidden"
                  style="margin-left: 24px; max-width: 150px"
                >
                  <span style="color: #666">产品规格：</span>
                  <el-tooltip
                    class="item"
                    effect="light"
                    :content="chooseBomObj.sku_name"
                    placement="top"
                  >
                    <span>{{ chooseBomObj.sku_name }}</span>
                  </el-tooltip>
                </div>
                <div
                  class="overHidden"
                  style="margin-left: 24px; max-width: 100px"
                >
                  <span style="color: #666">物料名称：</span>
                  <el-tooltip
                    class="item"
                    effect="light"
                    :content="chooseBomObj.name"
                    placement="top"
                  >
                    <span>{{ chooseBomObj.name }}</span>
                  </el-tooltip>
                </div>
                <div
                  class="overHidden"
                  style="margin-left: 24px; max-width: 100px"
                >
                  <span style="color: #666">所需数量：</span>
                  <span class="mainColor">{{ chooseBomObj.total }}</span>
                </div>
              </div>
              <!-- @selection-change="handleSelectionChange" -->
              <el-table :data="supplyList" style="width: 100%" border>
                <!-- <el-table-column type="selection" width="40"> </el-table-column> -->
                <el-table-column
                  prop="supplier_serial"
                  label="供应商编号"
                  header-align="center"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="供应商名称"
                  header-align="center"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="username"
                  label="联系人"
                  header-align="center"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="phone"
                  label="联系电话"
                  header-align="center"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="num"
                  label="执行数量"
                  header-align="center"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-input
                      type="number"
                      :min="0"
                      placeholder="请输入"
                      v-model="scope.row.num"
                    >
                    </el-input>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>

      <template slot="footer">
        <el-button @click="handleCancel">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="handleCheck">{{
          $t("confirm")
        }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { executeList, executeSave } from "@/api";
export default {
  props: {
    supplyData: {
      type: Array,
    },
    chooseBomObj: {
      type: Object,
    },
  },
  data() {
    return {
      chooseVisible: true,
      chooseInfo: [],
      supplyList: [],
      supplyInfo: {},
      activeName: "supply",
    };
  },
  watch: {
    supplyData: {
      handler(val, oldVal) {
        // this.supplyList = JSON.parse(JSON.stringify(this.supplyData))
        this.supplyList = this.supplyData;
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    // async fetchSupplyList() {
    //   const res = await executeList(this.supplyData)
    //   if (res?.status === 1) {
    //     this.supplyList = res?.list || []
    //     this.supplyInfo = res?.production_bom_info || {}
    //   }
    // },
    handleSelectionChange(val) {
      this.chooseInfo = val;
    },
    async handleCheck() {
      const total = this.supplyList.reduce((pre, cur) => {
        return pre + Number(cur.num);
      }, 0);
      if (total !== this.chooseBomObj.total) {
        this.$message.warning("执行数量之和不等于所需数量，请确认后提交！");
        return;
      }
      let arr = [];
      this.supplyList.forEach((item) => {
        arr.push({
          id: item?.legal_person ? 0 : item.id,
          supplier_id: item.legal_person ? item.id : item.supplier_id,
          num: Number(item.num),
        });
      });
      const params = {
        confirmData: arr,
        tableData: this.supplyList,
      };
      this.$emit("supplyConfirm", params);
    },
    handleCancel() {
      this.$emit("handleClose");
    },
  },
};
</script>

<style lang="scss" scoped>
.supply-wrapper {
  ::v-deep .el-dialog {
    width: 70% !important;
  }

  .managementWrapper {
    background: red;
    .top-wrapper {
      font-size: 16px;
      margin-bottom: 24px;
      & > div {
        flex: 1;
      }
      .top-left {
        max-width: 200px;
      }
      .top-right {
        margin-left: 24px;
        max-width: 100vw;
      }
    }
    .prodBox {
      padding-left: 6px;
      .imgBox {
        width: 64px;
        height: 64px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .rightBox {
        margin-left: 14px;
        text-align: left;
        .top {
          max-width: 200px;
          margin-bottom: 6px;
        }
        .bottom {
          color: $mainColor;
        }
      }
    }
  }
}
</style>
